const path = require('path');
//node引入path

//2.1导入html插件，得到一个构造函数
const HtmlPlugin = require('html-webpack-plugin');
//2.2 创建html插件的实例对象
const htmlPlugin = new HtmlPlugin({
    //源html文件的存放路径
    template: './src/index.html',
    //生成的文件的存放路径
    filename: './index.html'
});

//clean-webpack-plugin 自动更新dist文件夹的插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');




// 1.使用node.js中的导出语法，向外导出一个webpack的配置对象

module.exports = {
    // 代表webpack运行的模式，有两个可选值，一个是开发阶段（打包时间短，不压缩体积）：development，一个是发行阶段（打包时间长，压缩体积）：production
    mode: 'development',
    // mode: 'production'
    //打包文件来源
    entry: path.join(__dirname, './src/index1.js'),
    //生成打包文件的路径和文件名
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'js/bundle.js'
    },
    plugins: [htmlPlugin, new CleanWebpackPlugin()],//2.3通过plugins节点使html插件生效
    devServer: {
        open: true,
        host: '127.0.0.1',
        port: 80
        //http协议中端口号80，可以被省略
    },
    //放置着所有第三方文件模块的匹配规则（webpack处理不了的文件类型来这里找）
    module: {
        rules: [ //文件后缀名的匹配规则
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },
            {
                test: /\.jpg|png|gif$/,
                use: 'url-loader?limit=10&outputPath=images'
                // use: {
                // loader: 'url-loader',
                // options: {
                // limit: 100,
                // outputPath: 'image'
                // }
                // }
            },
            {
                //排除exclude
                test: /\.js$/, use: 'babel-loader', exclude: /node_modules/
            }

        ]
    },

    //为了在运行时报错的行数与源代码一致，而不是跟压缩后的代码一致
    // devtool: 'eval-source-map'
    devtool: 'nosources-source-map'
}





